<script setup lang="ts">
  import { computed, PropType } from 'vue'

  defineOptions({
    name: 'CustomerInfoReturnFactoryDetectDetail',
  })

  const props = defineProps({
    detail: {
      type: Object as PropType<ReturnFactoryDetectDetail>,
      required: true,
    },
  })

  // 公司地址
  const address = computed(() => {
    const { province, city, area, address } = props.detail
    return `${province} ${city} ${area} ${address}`
  })
</script>

<template>
  <div class="customer-info-return-factory-detect-detail">
    <div class="title">公司信息</div>
    <div class="info">
      <div class="item">
        <div class="label">
          <div class="text">公司姓名</div>
          <div class="separate">:</div>
        </div>
        <div class="value">{{ props.detail.username }}</div>
      </div>
      <div class="item">
        <div class="label">
          <div class="text">联系手机</div>
          <div class="separate">:</div>
        </div>
        <div class="value">{{ props.detail.phone }}</div>
      </div>
      <div class="item">
        <div class="label">
          <div class="text">公司地址</div>
          <div class="separate">:</div>
        </div>
        <div class="value">{{ address }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .customer-info-return-factory-detect-detail {
    display: flex;
    flex-direction: column;
    row-gap: 6px;

    .title {
      font-size: 12px;
      font-weight: bold;
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
    }

    .info {
      padding: 0 0 0 9px;
      display: flex;
      row-gap: 4px;
      flex-wrap: wrap;
      column-gap: 64px;
      flex-direction: column;

      .item {
        display: flex;
        column-gap: 5px;

        .label {
          display: flex;
          color: #606266;
        }
      }
    }
  }
</style>
